<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <!-- 空referrer才能加载b站头像 -->
    <meta name="referrer" content="no-referrer">
    <title>全屏特效示例</title>
    <!-- !!!重要!!! -->
    <!-- 预加载图片，防止网速较慢时图片出不来 -->
    <!-- 按以下格式填入所有大图链接，让浏览器在加载页面时提前拉取图片 -->
    <link rel="preload" as="image" href="https://huixinghao.cn/dist/static/webp/bg-b922890b.webp" />
    <style>
        #container {
            width: 100%;
            height: 100%;
            position: relative;
            color: white;

            animation-name: fade-out;
            animation-delay: 5s;
            animation-duration: 1s;
            animation-fill-mode: forwards;
        }

        .user {
            position: absolute;
            top: 30%;
            left: 0;
            width: 100%;

            display: flex;
            justify-content: center;
            gap: 10px;

            display: flex;
            flex-flow: row nowrap;
            align-items: center;
        }

        .user .avatar {
            width: 130px;
            height: 130px;

            border-radius: 100%;
            overflow: hidden;
        }

        .user .name {
            font-size: 40px;
        }

        .banner {
            position: absolute;
            top: 45%;
            left: 0;
            width: 100%;

            display: flex;
            justify-content: center;

            font-size: 46px;
            text-align: center;
        }

        .user,
        .banner {
            animation-name: fade-in;
            animation-delay: 1s;
            animation-duration: 2s;
            animation-fill-mode: both;
        }

        @keyframes fade-out {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
            }
        }


        @keyframes fade-in {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }
    </style>
</head>

<body style="width: 1920px;height: 1080px;overflow: hidden;">
    <div id="container" style="display: none;">
        <img src="https://huixinghao.cn/dist/static/webp/bg-b922890b.webp">
        <div class="user">
            <img class="avatar" />
            <div class="name"></div>
        </div>
        <div class="banner"></div>
    </div>
    <script>
        const queue = []
        const settings = {
            maskColor: '#0000',
            guard: {
                banner: {
                    1: "感谢老板开通舰长 mua~",
                    2: "感谢老板开通总督 mua~",
                    3: "感谢老板开通提督 mua~",
                },
                enable: true
            },
            gift: {
                min: 1,
                banner: '感谢老板赠送礼物 mua~',
                enable: false
            },
            superChat: {
                banner: '感谢老板的醒目留言呀',
                enable: false,
            },
            sound: false
        }
        let running = false

        document.getElementById('container').addEventListener('animationend', e => {
            if (e.currentTarget === e.target) {
                container.style.setProperty('display', 'none')
                setTimeout(next, 0);
            }
        })

        function next() {
            running = true
            const user = queue.shift()
            if (!user) {
                running = false
                return
            }
            let text = ''
            switch (user.type) {
                case 'superChat': {
                    text = settings.superChat.banner
                }
            }
            const container = document.getElementById('container')
            const img = container.querySelector('img')

            // 放入数据
            container.querySelector('.user .avatar').src = user.face
            container.querySelector('.user .name').innerText = user.uname
            container.querySelector('.banner').innerText = text

            // 取消隐藏
            container.style.removeProperty('display')
            // 使display生效
            container.offsetHeight
            // 重置动图
            img.src = img.src
        }

        const externalCss = document.createElement('style')
        document.head.append(externalCss)
        const handlers = {
            update: {
                user(newValue) {
                    console.log('用户信息更新了', newValue)
                },
                option(newValue) {
                    console.log('插件配置更新了', newValue)
                    Object.assign(settings, newValue)
                },
                css(newValue) {
                    console.log('css更新了', newValue);
                    externalCss.innerHTML = newValue
                }
            },
            event: {
                LIVE_OPEN_PLATFORM_SUPER_CHAT(e) {
                    queue.push(e)
                    if (!running) next()
                }
            }
        }
        //监听事件
        window.addEventListener('message', e => {
            const { category, type, args } = e.data
            handlers[category]?.[type]?.apply(e, args)
        })
        // 订阅事件
        parent.postMessage({
            fun: 'subscribe',
            args: Object.keys(handlers.event)
        }, '*')

        // 可以自行发送模拟数据进行测试，再进行上传
        /***上传之前记得删除***/
        // setTimeout(() => {
        //     for (let i = 0; i < 3; i++) {
        //         handlers.event.LIVE_OPEN_PLATFORM_SUPER_CHAT({
        //             "id": 18,
        //             "type": "superChat",
        //             "uid": 351796422218,
        //             "uname": "随机用户67",
        //             "face": "https://i0.hdslb.com/bfs/face/270ad4b3251959e36e2ac55663adbe801f435b3a.jpg",
        //             "timestamp": 1706084661,
        //             "fansMedalWearingStatus": true,
        //             "fansMedalName": "粉丝勋章",
        //             "fansMedalLevel": 21,
        //             "guardLevel": 3,
        //             "isAnchor": false,
        //             "isOwner": false,
        //             "dmType": 1,
        //             "emojiImgUrl": "",
        //             "message": "浮生万千，吾爱有三。日，月与卿。日为朝，月为暮，卿为朝朝暮暮。",
        //             "rmb": 2000,
        //             "startTime": 1706084661,
        //             "endTime": 1706096661
        //         })
        //     }
        // }, 3000);
    </script>
</body>

</html>